<template>
  <div>
    <el-row>
      <el-col :span="9"><div style="height: 96vh;"></div></el-col>
      <el-col :span="6">
        <div style="">
          <div style="margin: 20rem auto;width: 22rem; height: 15rem;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 10px">
            <div style="width: 20rem; margin:0rem auto;text-align: center;padding-top: 0.2rem;">
              <h3>登录</h3>
              <p>
                <label>账户：</label>
                <el-input v-model="user.username" placeholder="" size="small" style="width: 12rem;"></el-input>
              </p>
              <p>
                <label>密码：</label>
                 <el-input v-model="user.password" placeholder="" show-password size="small" style="width: 12rem;margin-top: 0.1rem;"></el-input>
              </p>
              <p>
                <!-- <button type="button" @click="login()">登录</button> -->
                  <el-button type="success"  @click="login()" plain icon="el-icon-user">登录</el-button>
              </p>
          </div>
          </div>
             <span  style="font-weight: 300;font-size: 0.9rem;margin-left:2.5rem;"> 管理员 账号：admin 密码：admin ----- 新建，重置密码都是 1111</span>
        </div>
      </el-col>
      <el-col :span="9"><div style="height: 96vh;"> </div></el-col>

    </el-row>

  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        user: {
          username:'',
          password:''
        }
      }
    },
    methods:{
      ...mapMutations(['setIsLogined','setUser','setName']),
      login(){
        this.$ajax.post('login',this.user).then(res=>{
          var result=res.data;
          if(result.success){
            var name = result.data.name;
            var token= result.data.token;
            window.sessionStorage.setItem("name",name);
            window.sessionStorage.setItem("token",token);
			      window.sessionStorage.setItem("role",result.data.roles);
            this.setIsLogined(true);
            this.setName(name);
            this.setUser(this.user);
            if(result.data.roles!=='ROLE_STUDENT'){
               this.$router.replace('/classGrade');
            }else{
               this.$router.replace('/stuClassGrade');
            }

          }else{
            this.username='';
            this.password='';
            this.$message.error('账号密码错误,请重新输入');
          }
        }).catch(error=>{
          this.$message.error('网络连接失败！');
       })
      }

    }

  }
</script>

<style scoped>

</style>
